<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-7xl mx-auto">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="mb-6">
            <template #header>
              <h2 class="text-2xl font-bold text-gray-800">管理后台首页</h2>
            </template>
            <p class="text-gray-600">欢迎使用 Vue3 Monorepo 管理后台</p>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="mb-6">
        <el-col :span="8">
          <el-card class="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
            <template #header>
              <h3 class="text-lg font-semibold">用户统计</h3>
            </template>
            <div class="text-center">
              <h4 class="text-sm opacity-90">总用户数</h4>
              <p class="text-3xl font-bold mt-2">1,234</p>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="bg-gradient-to-r from-green-500 to-green-600 text-white">
            <template #header>
              <h3 class="text-lg font-semibold">今日活跃</h3>
            </template>
            <div class="text-center">
              <h4 class="text-sm opacity-90">活跃用户</h4>
              <p class="text-3xl font-bold mt-2">567</p>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="bg-gradient-to-r from-purple-500 to-purple-600 text-white">
            <template #header>
              <h3 class="text-lg font-semibold">系统状态</h3>
            </template>
            <div class="text-center">
              <h4 class="text-sm opacity-90">运行状态</h4>
              <el-tag type="success" class="mt-2">正常</el-tag>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- Tailwind CSS 测试区域 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <template #header>
              <h3 class="text-xl font-semibold text-gray-800">Tailwind CSS 测试</h3>
            </template>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div class="bg-red-100 text-red-800 p-4 rounded-lg text-center border border-red-200">
                <div class="text-2xl font-bold">红</div>
                <div class="text-sm">Red</div>
              </div>
              <div class="bg-green-100 text-green-800 p-4 rounded-lg text-center border border-green-200">
                <div class="text-2xl font-bold">绿</div>
                <div class="text-sm">Green</div>
              </div>
              <div class="bg-blue-100 text-blue-800 p-4 rounded-lg text-center border border-blue-200">
                <div class="text-2xl font-bold">蓝</div>
                <div class="text-sm">Blue</div>
              </div>
              <div class="bg-yellow-100 text-yellow-800 p-4 rounded-lg text-center border border-yellow-200">
                <div class="text-2xl font-bold">黄</div>
                <div class="text-sm">Yellow</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
// 使用公共工具
import { useLocalStorage } from '@mo/composables'
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #409eff;
  margin: 0;
}

.mt-4 {
  margin-top: 1rem;
}
</style> 